<template>
    <div class="_main">
        <div class="_main_1">
            <div class="_main_1_btn">
                <div @click="activeBtnIndex(1)" :class="coinId === 1?'_btn_active':''">USDT</div>
                <div @click="activeBtnIndex(2)" :class="coinId === 2?'_btn_active':''">KOS</div>
            </div>
            <!--USDT-->
            <div>
                <div class="_main_1_t">
                    <div>{{$t("wallet.balance")}}</div>
                    <div>{{balance}}</div>
                </div>
            </div>
        </div>
        <div class="_main_2">
            <div class="title">{{$t("wallet.log")}}</div>
            <van-pull-refresh v-model="isLoading"
                              :loading-text="$t('fresh.loading')"
                              :loosing-text="$t('fresh.loosing')"
                              :pulling-text="$t('fresh.pulling')"
                              :success-text="$t('fresh.success')"
                              style="flex:1; overflow:auto" @refresh="()=>getData(true)">
                <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        :error-text="$t('fresh.error')"
                        :loading-text="$t('fresh.loading')"
                        :finished-text="$t('fresh.noMore')"
                        :immediate-check="false"
                        :offset="10">
                    <div class="list-box" v-for="item in items" :key="item.id">
                        <div class="_main_2_1">
                            <div>{{item.note}}</div>
                            <div>{{item.usable > 0? '+' + item.usable: item.usable}}</div>
                        </div>
                        <div class="_main_2_time">{{item.createTime}}</div>
                        <div class="_main_2_line"></div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="_main_3">
            <div class="_main_3_btn" @click="transfer">{{$t("wallet.get")}}</div>
        </div>
    </div>
</template>

<script>
    import http from "../../http";

    export default {
        data() {
            return {
                coinId: this.$route.query.coinId ? this.$route.query.coinId * 1 : 1,
                page: 1,
                count: 0,
                finished: false,
                isLoading: false,
                items: [],
                loading: true,
                balance: '-'
            }
        },
        mounted() {
            this.getWallet();
            this.getData(true);
        },
        methods: {
            async getData(isRefresh) {
                if (isRefresh) {
                    this.page = 1;
                } else {
                    this.page++;
                }
                let res = await http.get(`/api/user-money-log/list?pageSize=10&currentPage=${this.page}&coinId=` + this.coinId);
                if (res.code === 200) {
                    this.items = isRefresh ? res.data.records : this.items.concat(res.data.records);
                    this.count = res.data.total;
                    if(isRefresh) this.finished = false;
                    if (this.items.length === this.count) {
                        this.finished = true;
                    }
                }
                this.loading = false;
                this.isLoading = false;
            },
            async getWallet() {
                let res = await http.get(`/api/wallet/get?id=` + this.coinId);
                if (res.code === 200) {
                    this.balance = res.data;
                }
            },
            activeBtnIndex: function (index) {
                this.coinId = index;
                this.getWallet();
                this.getData(true);
            },
            transfer: function () {
                this.$router.push("/TurnMoney?coinId=" + this.coinId);
            }
        }
    }

</script>

<style scoped lang="scss">
    .index ::v-deep {
        color: red;
    }

    .index {
        ::v-deep {
            color: blue;
        }
    }

    .title {
        height: 50px;
        font-size: 16px;
        display: flex;
        align-items: center;
        color: $color;
        text-align: left;
    }

    .index {
        color: red;
        font-size: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    ._main {
        background: #333;
        overflow: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    ._main_1 {
        width: 100%;
        height: 120px;
        background-color: #2C1A0F;
        padding: 15px 20px;
    }

    ._main_1_btn {
        display: flex;
        align-items: center;

        div {
            width: 108px;
            height: 41px;
            background-color: transparent;
            border-radius: 21px;
            font-size: 22px;
            @include fontTCRegular;
            font-weight: 400;
            color: $color;
            line-height: 41px;
            margin-right: 20px;
            border: 1px solid $color;
        }
    }

    ._btn_active {
        color: #0B0B09 !important;
        background: $color !important;
    }

    ._main_1_t {
        @include flex;
        margin-top: 20px;

        div {
            font-size: 15px;
            @include fontTCMedium;
            font-weight: 500;
            color: $color;
        }
    }

    ._main_1_t_1 {
        @include flex;
        margin-top: 12px;

        div {
            font-size: 15px;
            @include fontTCMedium;
            font-weight: 500;
            color: $color;
        }
    }

    ._main_2 {
        height: calc(100vh - 245px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: #2C1A0F;
        padding: 0 15px;
        padding-bottom: 20px;
        margin-top: 10px;
    }

    ._main_2_1 {
        @include flex;
        margin-top: 15px;

        div {
            font-size: 14px;
            @include fontTCMedium;
            font-weight: 500;
            color: $color;
        }
    }

    ._main_2_time {
        font-size: 14px;
        @include fontTCMedium;
        font-weight: 500;
        color: $color1;
        text-align: left;
        margin-top: 10px;
    }

    ._main_2_line {
        width: 100%;
        height: 1px;
        background: $color1;
        margin-top: 15px;
    }

    ._main_2_line_1 {
        width: 100%;
        height: 1px;
        background: $color1;
        margin-top: 12px;
    }

    :deep(.van-tabs__line) {
        height: 1px !important;
        width: 20px !important;
        bottom: 25px !important;
    }

    ._main_3 {
        height: 60px;
        width: 100%;
        margin-top: 10px;
        background-color: #2C1A0F;
        padding: 15px 0 0 15px;
    }

    ._main_3_btn {
        width: 90px;
        height: 32px;
        background: $color;
        border-radius: 5px;
        border: 1px solid #DAB765;
        font-size: 13px;
        @include fontSCRegular;
        font-weight: 400;
        color: #0B0B09;
        line-height: 32px;
    }
</style>
